<template>
  <div class="about">
    <h1>X---{{mousePoint.X}}</h1>
    <h1>Y---{{mousePoint.Y}}</h1>
  </div>
</template>
<script>
import { onBeforeMount, reactive,onBeforeUnmount } from 'vue'
import savePoint from '../Hooks'
export default {
  setup() {
    //savePoint自定义Hooks
    //把setup中使用的组合式API（ref,reactive...）进行封装
    let mousePoint=savePoint()
    // let mousePoint=reactive({
    //   X:0,
    //   Y:0
    // })
    // function savePoint(event){
    //   mousePoint.X=event.pageX,
    //   mousePoint.Y=event.pageY
    //   console.log(mousePoint.X,mousePoint.Y);
    // }
    // onBeforeMount(()=>{
    //   window.addEventListener('click',savePoint)
    // })
    // onBeforeUnmount(()=>{
    //   window.removeEventListener('click',savePoint)
    // })
    return {
      mousePoint
    }
  },
}
</script>
